<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<link href="css/index.css" rel="stylesheet" type="text/css" />
		<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<link href="css/index_media.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="jq/jquery.min.js" ></script>
		<script>
		$(function() {
			$(".phone").click(function() {
				$(".one").slideToggle();
			})
			$(window).resize(function() {
				if ($(this).width() > 912) {
					$(".one").show();
				}
			})
		})
	</script>
	</head>
	<body>
		<div style="width: 100%;">
			<header>
				<nav>
					<a href="#">
						<img style="height: 30px;line-height: 30px;" src="img/logo.png" />
					</a>
					<ul class="navDetail one">
						<li>
							<a href="#"><i class="fa fa-edit"></i>&nbsp;在线编辑器</a>
						</li>
						<li>
							<a href="#"><i class="fa fa-code"></i>&nbsp;在线代码</a>
						</li>
						<li>
							<a href="#"><i class="fa fa-balance-scale"></i>&nbsp;文本比较</a>
						</li>
						<li>
							<a href="#"><i class="fa fa-download"></i>&nbsp;jQuery下载</a>
						</li>
						<li>
							<a href="#"><i class="fa fa-ship"></i>&nbsp;前段库</a>
						</li>
						<li>
							<a href="#"><i class="fa fa-book"></i>&nbsp;在线手册</a>
						</li>
						<li>
							<a href="#"><i class="fa fa-user"></i>&nbsp;登录/注册</a>
						</li>
					</ul>
					<button class="phone">
						<i class="fa fa-list-ul" ></i>
					</button>
				</nav>
				<div class="menu">
					<a class="menuItem" href="#">
						<span class="show">
						<i class="fa fa-paint-brush"></i>
						&nbsp;UI 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
					<a class="menuItem" href="#">
						|
						<span class="show">
						<i class="fa fa-keyboard-o"></i>
						&nbsp;输入 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
					<a class="menuItem" href="#">
						|
						<span class="show">
						<i class="fa fa-film"></i>
						&nbsp;媒体 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
					<a class="menuItem" href="#">
						|
						<span class="show">
						<i class="fa fa-paper-plane-o"></i>
						&nbsp;导航 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
					<a class="menuItem Chid" href="#">
						|
						<span class="show">
						<i class="fa fa-paint-dropbox"></i>
						&nbsp;其他 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
					<a class="menuItem Chid" href="#">
						|
						<span class="show">
						<i class="fa fa-th-large"></i>
						&nbsp;网页模板 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
					<a class="menuItem Chid" href="#">
						|
						<span class="show">
						<i class="fa fa-tablet"></i>
						&nbsp;APP模板 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
					<a class="menuItem Chid" href="#">
						|
						<span class="show">
						<i class="fa fa-file-code-o"></i>
						&nbsp;常用代码 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
					<a class="menuItem Chid" href="#">
						|
						<span class="show">
						<i class="fa fa-code"></i>
						&nbsp;在线代码 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
					<a class="menuItem Chid" href="#">
						|
						<span class="show">
						<i class="fa fa-cloud"></i>
						&nbsp;云服务底价 
						<i class="fa fa-angle-down"></i>
						&nbsp;
					</span>
					</a>
				</div>
				<div class="menuDetail"></div>
			</header>
			<div class="search">
				<div class="content">
					<input placeholder="输入插件关键字.." />
					<button><i class="fa fa-search"></i></button>
				</div>
			</div>
			<article>
				<div class="tools">
					<ol class="breadcrumb jjk20 top10">
						<li>
							<a href="#">首页</a>
						</li>
						<li class="active">布局</li>
						<li id="ts" style="float: right; font-size: 13px; ">
							<a href="#" data-para="time"><i class="fa fa-flag"></i> &nbsp;最新发布</a>&nbsp;
							<a href="#" data-para="comments"><i class="fa fa-heart"></i> &nbsp;最多收藏</a>&nbsp;
							<a href="#" data-para="comments"><i class="fa fa-comments-o"></i> &nbsp;最多评论</a>&nbsp;
							<a href="#" data-para="downloads"><i class="fa fa-arrow-circle-o-down"></i> &nbsp;最多下载</a>&nbsp;
							<a href="#" data-para="ie8"><i class="fa fa-bus"></i> &nbsp;兼容IE8</a>&nbsp;
							<a href="#" data-para="ie6"><i class="fa fa-motorcycle"></i> &nbsp;兼容IE6</a>&nbsp;
						</li>
					</ol>
				</div>
				<div class="artContent">
					<div class="artItem">
							<img src="img/1.png" class="Img"  />
						<div class="artFont">
							<div style="text-align: left;">
								<h5 class="BoxTitle">go.js流程图绘制 无水印 箭头随意拖拽</h5>
								<p class="BoxP">go.js流程图绘制 箭头随意拖拽。根据go.js改编而成。布局,拖和放</p>
								<div class="BoxList"><i class="fa fa-list-ul" ></i>&nbsp;&nbsp;布局</div>
							</div>
						</div>
						<div class="BoxFoot">
							<div style="float: left;">
								<i class="fa fa-eye"></i>
								&nbsp;<span>4047</span>&nbsp;&nbsp;
								<i class="fa fa-heart"></i>
								&nbsp;<span>71</span>
							</div>
							<div style="float: right;border-left: 1px solid #e7e7e7;padding-left: 10px;">
								<i class="fa fa-user-secret"></i>
							</div>
						</div>
					</div>
					<div class="artItem">
							<img src="img/2.png" class="Img"  />
						<div class="artFont">
							<div style="text-align: left;">
								<h5 class="BoxTitle">IT电脑设计公司bootstrap模板</h5>
								<p class="BoxP">IT电脑设计公司bootstrap模板是一款宽屏大气的设计公司官网网站模板下载。布局</p>
								<div class="BoxList"><i class="fa fa-list-ul" ></i>&nbsp;&nbsp;布局</div>
							</div>
						</div>
						<div class="BoxFoot">
							<div style="float: left;">
								<i class="fa fa-eye"></i>
								&nbsp;<span>5938</span>&nbsp;&nbsp;
								<i class="fa fa-heart"></i>
								&nbsp;<span>35</span>
							</div>
							<div style="float: right;border-left: 1px solid #e7e7e7;padding-left: 10px;">
								<i class="fa fa-user-secret"></i>
							</div>
						</div>
					</div>
					<div class="artItem">
							<img src="img/3.png" class="Img"  />
						<div class="artFont">
							<div style="text-align: left;">
								<h5 class="BoxTitle">jQuery404错误页面模板</h5>
								<p class="BoxP">简单的jQuery+CSS3实现404背景动画特效布局</p>
								<div class="BoxList"><i class="fa fa-list-ul" ></i>&nbsp;&nbsp;布局</div>
							</div>
						</div>
						<div class="BoxFoot">
							<div style="float: left;">
								<i class="fa fa-eye"></i>
								&nbsp;<span>3933</span>&nbsp;&nbsp;
								<i class="fa fa-heart"></i>
								&nbsp;<span>35</span>
							</div>
							<div style="float: right;border-left: 1px solid #e7e7e7;padding-left: 10px;">
								<i class="fa fa-user-secret"></i>
							</div>
						</div>
					</div>
					<div class="artItem">
							<img src="img/4.png" class="Img"  />
						<div class="artFont">
							<div style="text-align: left;">
								<h5 class="BoxTitle">jQuery响应式网站模板</h5>
								<p class="BoxP">jQuery响应式网站模板界面简洁大方布局</p>
								<div class="BoxList"><i class="fa fa-list-ul" ></i>&nbsp;&nbsp;布局</div>
							</div>
						</div>
						<div class="BoxFoot">
							<div style="float: left;">
								<i class="fa fa-eye"></i>
								&nbsp;<span>3541</span>&nbsp;&nbsp;
								<i class="fa fa-heart"></i>
								&nbsp;<span>41</span>
							</div>
							<div style="float: right;border-left: 1px solid #e7e7e7;padding-left: 10px;">
								<i class="fa fa-user-secret"></i>
							</div>
						</div>
					</div>
					<div class="artItem">
							<img src="img/5.png" class="Img"  />
						<div class="artFont">
							<div style="text-align: left;">
								<h5 class="BoxTitle">仿饿了么联动菜单</h5>
								<p class="BoxP">快速构建一个类似于饿了么的点餐页面布局,垂直导航</p>
								<div class="BoxList"><i class="fa fa-list-ul" ></i>&nbsp;&nbsp;布局</div>
							</div>
						</div>
						<div class="BoxFoot">
							<div style="float: left;">
								<i class="fa fa-eye"></i>
								&nbsp;<span>5652</span>&nbsp;&nbsp;
								<i class="fa fa-heart"></i>
								&nbsp;<span>46</span>
							</div>
							<div style="float: right;border-left: 1px solid #e7e7e7;padding-left: 10px;">
								<i class="fa fa-user-secret"></i>
							</div>
						</div>
					</div>
					<div class="artItem">
							<img src="img/6.png" class="Img"  />
						<div class="artFont">
							<div style="text-align: left;">
								<h5 class="BoxTitle">仿大米官网首页</h5>
								<p class="BoxP">jQuery仿大米官网首页布局</p>
								<div class="BoxList"><i class="fa fa-list-ul" ></i>&nbsp;&nbsp;布局</div>
							</div>
						</div>
						<div class="BoxFoot">
							<div style="float: left;">
								<i class="fa fa-eye"></i>
								&nbsp;<span>13441</span>&nbsp;&nbsp;
								<i class="fa fa-heart"></i>
								&nbsp;<span>86</span>
							</div>
							<div style="float: right;border-left: 1px solid #e7e7e7;padding-left: 10px;">
								<i class="fa fa-user-secret"></i>
							</div>
						</div>
					</div>
					<div class="artItem">
							<img src="img/7.png" class="Img"  />
						<div class="artFont">
							<div style="text-align: left;">
								<h5 class="BoxTitle">jQuery生日快乐贺卡模版</h5>
								<p class="BoxP">jQuery生日快乐贺卡模版布局</p>
								<div class="BoxList"><i class="fa fa-list-ul" ></i>&nbsp;&nbsp;布局</div>
							</div>
						</div>
						<div class="BoxFoot">
							<div style="float: left;">
								<i class="fa fa-eye"></i>
								&nbsp;<span>6101</span>&nbsp;&nbsp;
								<i class="fa fa-heart"></i>
								&nbsp;<span>119</span>
							</div>
							<div style="float: right;border-left: 1px solid #e7e7e7;padding-left: 10px;">
								<i class="fa fa-user-secret"></i>
							</div>
						</div>
					</div>
					<div class="artItem">
							<img src="img/8.png" class="Img"  />
						<div class="artFont">
							<div style="text-align: left;">
								<h5 class="BoxTitle">jQuery移动端无限滚动加载瀑布流</h5>
								<p class="BoxP">jQuery移动端无限滚动加载瀑布流布局</p>
								<div class="BoxList"><i class="fa fa-list-ul" ></i>&nbsp;&nbsp;布局</div>
							</div>
						</div>
						<div class="BoxFoot">
							<div style="float: left;">
								<i class="fa fa-eye"></i>
								&nbsp;<span>7979</span>&nbsp;&nbsp;
								<i class="fa fa-heart"></i>
								&nbsp;<span>59</span>
							</div>
							<div style="float: right;border-left: 1px solid #e7e7e7;padding-left: 10px;">
								<i class="fa fa-user-secret"></i>
							</div>
						</div>
					</div>
				</div>
				<div class='next'>
					<a href='#'>←</a>
				</div>
			</article>
			
			<footer>
				<ul class="list-inline">
					<li class="footerRig">
						<a href="#">版权声明</a>
					</li>
					<li class="footerRig">
						<a href="#">在线反馈</a>
					</li>
					<li class="footerRig">
						<a href="#">广告合作</a>
					</li>
					<li class="footerRig">
						<a href="#">网页技术</a>
					</li>
					<li class="footerRig">
						<a href="#">jq22工具库</a>
					</li>
					<li class="footerRig">
						<a href="label1">jquery插件</a>
					</li>
					<li style="float:left">
						2012-2019 jQuery插件库版权所有. 备案号:
						<a href="#">沪ICP备13043785号-1</a>
						<a href="#" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="img/9.png" style="float:left;padding-top: 3px;" />
							<p style="float:left;height:20px;line-height:20px;margin: 4px 0px 0px 5px; color:#939393;">浙公网安备 33041102000314号</p>
						</a>
					</li>
				</ul>

			</footer>

		</div>
	</body>

</html>